<template>
  <el-main>
    <div class="cc-display selectTop">
      <div class="width80p sc-display">
        <SelectedItem msg="SelectedItem" />
      </div>
    </div>
    <ShowArticle msg="ShowArticle" />
    <TalkAbout :discusslist="discussList" />
  </el-main>
</template>

<script>
// @ is an alias to /src
import SelectedItem from "./SelectedItem.vue";
import ShowArticle from "./ShowArticle.vue";
import TalkAbout from "./TalkAbout.vue";

export default {
  name: "Article",
  components: {
    SelectedItem,
    ShowArticle,
    TalkAbout
  },
  data() {
    return {
      discussList: []
    };
  },
  created() {
    this.getDiscuss();
  },
  methods: {
    getDiscuss() {
      this.axios
        .post("nc_search/discuss", {
          topicId: 1,
          topicType: "article"
        })
        .then(res => {
          if (res.data.errCode && res.data.errCode == "success") {
            this.discussList = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("评论查询失败！");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}
.selectTop {
  width: 100%;
  min-width: 1000px;
  height: 45px;
  background-color: #f6f6f6;
  margin-top: 30px;
}

.width80p {
  height: 100%;
  width: 80%;
  min-width: 1000px;
  max-width: 1200px;
}
</style>
